import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
import menusConfig from "../../config/menusConfig"
import { NavLink, withRouter } from "react-router-dom"
import storageUtils from "../../utils/storageUtils"
import { SingleRole } from "../../api/index"
import user from '../../pages/admin/user/User';


const { SubMenu } = Menu;


class LeftNav extends Component {
    state = {
        user: storageUtils.getUser(),
        menus:[],
        munubar:null,
    }

    // UNSAFE_componentWillMount() { //初始化菜单的结构，因为初始化结构是同步的所以放在该钩子函数中
        
    // }

    componentDidMount() {
        this.getRoles();
        
    }

    // 获取当前登录用户所属的角色
    getRoles = async () => {
        const role = await SingleRole({ _id: this.state.user.userGrade })
        this.setState({
            menus:role.menus?role.menus:[]
        },()=>{
            const menubar = this.creatMenu(menusConfig);
            console.log(menubar);
            this.setState({
                menubar
            })
        })
    }

    // 生成menu
    creatMenu = (arr) => {
        const { pathname } = this.props.location;
        return arr.map(item => {
            console.log(this.judgement(item))
            if(this.judgement(item)){
                if (item.children) {

                    // 通过filter函数查找出item.children的key和当前的pathname相同的项
                    const result = item.children.filter(citem => {
                        return citem.key === pathname;
                    })
                    // 如果result的长度大于0,则将默认的展开的选项this.openkeys的值赋值为当前的item.key
                    if (result.length) {
                        this.openkeys = item.key;
                    }
    
    
                    return <SubMenu key={item.key} title={item.title}>
                        {this.creatMenu(item.children)}
                    </SubMenu>
                } else {
                    return <Menu.Item key={item.key}>
                        <NavLink to={item.key}>
                            <Icon type={item.icon} />
                            {item.title}
                        </NavLink>
                    </Menu.Item>
                }
            }
        })
    }

    judgement=(menu)=>{
        console.log(this.state.user);
        if(this.state.user.userName=="admin"||menu.public||this.state.menus.includes(menu.key)){
            return true;
        }else if(menu.children){
            const result = menu.children.find(citem=>{
                return this.state.menus.includes(citem.key)
            })
            return result;
        }else{
            return false;
        }
    }

    render() {
        // 获取当前的路径
        const { pathname } = this.props.location;
        return (
            <div>
                <Menu
                    defaultSelectedKeys={[pathname]} //根据当前的路径来选择选中的选项
                    defaultOpenKeys={[this.openkeys]}//默认展开的选项
                    mode="inline"
                    theme="dark"
                >
                    {
                        this.state.menubar
                    }

                </Menu>
            </div>
        );
    }
}

export default withRouter(LeftNav);